<template>
  <!-- 主首页 -->
<el-card>
  <div class="restriction">
    <!-- 左侧 -->
    <div class="leftLabel">
      <p class="declare">机构申报情况</p>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="课程" name="first">
          <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData" height="600" border style="width: 100%">
            <el-table-column prop="InstitutionalType" label="机构名称" width="180%"></el-table-column>
            <el-table-column prop="Principal" label="课程数" width="140%"></el-table-column>
            <el-table-column prop="Organizers" label="新增申报" width="140%"></el-table-column>
            <el-table-column prop="licence" label="申报时间" width="140%"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="教师" name="second">
          <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData" height="600" border style="width: 100%">
            <el-table-column prop="InstitutionalType" label="机构名称" width="180%"></el-table-column>
            <el-table-column prop="Principal" label="教师数" width="140%"></el-table-column>
            <el-table-column prop="Organizers" label="新增申报" width="140%"></el-table-column>
            <el-table-column prop="licence" label="申报时间" width="140%"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="教学点" name="third">
          <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData" height="600" border style="width: 100%">
            <el-table-column prop="InstitutionalType" label="机构名称" width="180%"></el-table-column>
            <el-table-column prop="Principal" label="教学点数" width="140%"></el-table-column>
            <el-table-column prop="Organizers" label="新增申报" width="140%"></el-table-column>
            <el-table-column prop="licence" label="申报时间" width="140%"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="教材" name="fourth">
          <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData" height="600" border style="width: 100%">
            <el-table-column prop="InstitutionalType" label="机构名称" width="180%"></el-table-column>
            <el-table-column prop="Principal" label="教材数" width="140%"></el-table-column>
            <el-table-column prop="Organizers" label="新增申报" width="140%"></el-table-column>
            <el-table-column prop="licence" label="申报时间" width="140%"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 右侧 -->
    <div class="rightStatement">
      <div class="topBox">
        <div class="headers">
          <h1>Hi ,你好</h1>
          <div>{{ new Date().toLocaleString() }}</div>
        </div>
        <div class="center">
          <div>
            <p>待处理办件</p>
            <div style="font-size: 24px;margin-top: 10px;">724</div>
          </div>
          <div>
            <p>今日新增办件</p>
            <div style="color: rgb(24, 144, 255);font-size: 24px;margin-top: 10px;">0</div>
          </div>
        </div>
      </div>
      <div class="containers">
        <p class="titleskce">办件量统计</p>
      <el-tabs v-model="activeNamess" @tab-click="handleClick">
        <el-tab-pane label="本周" name="first">
          <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableDatass" height="600" border style="width: 100%">
            <el-table-column prop="InstitutionalType" label="办件类型" ></el-table-column>
            <el-table-column prop="Principal" label="办件量" ></el-table-column>
            <el-table-column prop="Organizers" label="办结量" ></el-table-column>
            <el-table-column prop="licence" label="办结率" ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="本月" name="second">
          <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData" height="600" border style="width: 100%">
            <el-table-column prop="InstitutionalType" label="办件类型" ></el-table-column>
            <el-table-column prop="Principal" label="办件量" ></el-table-column>
            <el-table-column prop="Organizers" label="办结量" ></el-table-column>
            <el-table-column prop="licence" label="办结率" ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="本年" name="third">
          <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData" height="600" border style="width: 100%">
            <el-table-column prop="InstitutionalType" label="办件类型" ></el-table-column>
            <el-table-column prop="Principal" label="办件量" ></el-table-column>
            <el-table-column prop="Organizers" label="办结量" ></el-table-column>
            <el-table-column prop="licence" label="办结率" ></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      </div>
    </div>
  </div>
</el-card>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'first',
      activeNamess: 'first',
      tableData: [
        {
          licence: '2021-10-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '沈阳市',
          Organizers: '厉害陈', // 4
          Principal: '7' // 5
        },
        {
          licence: '2021-11-02',
          Licenceissued: '2016-05-02',
          Institutional: '王小虎',
          InstitutionalType: '沈阳市',
          Organizers: '厉害陈',
          Principal: '7'
        }
      ],
      tableDatass: [
        {
          licence: '100%',
          Institutional: '王小虎', // 1
          InstitutionalType: '课程',
          Organizers: '12', // 4
          Principal: '6' // 5
        },
        {
          licence: '100%',
          Licenceissued: '2021-10-22',
          Institutional: '王小虎',
          InstitutionalType: '课程',
          Organizers: '12',
          Principal: '6'
        }
      ]
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="less" scoped>

  .restriction {
    display: flex;
    padding-top: 24px;
    padding-left: 24px;
  }

  .rightStatement {
    // width: 664px;
    width: 50%;
    height: 88vh;
    // background-color: #fff;
    .containers {
      height: 100%;
      padding: 0 24px 0;
      position: relative;
      background-color: #fff;
      .titleskce {
        position: absolute;
        top: 10px;
        right: 40px;
      }
    }
    .topBox {
      height: 196px;
      margin-bottom: 24px;
      padding: 24px;
      background-color: #fff;
      .center {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 40px;
      }
      .headers {
        display: flex;
        align-items: center;
        justify-content: space-between;
        h1 {
          font-size: 25px;
        }
      }
    }

  }

  .leftLabel {
    // width: 664px;
    width: 50%;
    height: 88vh;
    background-color: #fff;
    margin-right: 24px;
    padding: 0 24px 0;
    position: relative;

    .declare {
      position: absolute;
      right: 40px;
      top: 10px;
      font-size: 16px;
    }

  }

  /deep/.el-card__body {
    background:rgb(240, 242, 245);
    padding: 0;
  }

</style>
